<template>
  <div class="comprehensive-table-container">
    <el-row class="fyt-search">
      <el-col :span="24">
        <el-form :inline="true" :model="param" class="demo-form-inline">
          <el-form-item label="关键字">
            <el-input
              v-model="param.key"
              clearable
              placeholder="关键字"
            ></el-input>
          </el-form-item>
          <el-form-item label="栏目">
            <el-cascader
              v-model="param.id"
              :options="parentIdOptions"
              :props="parentProps"
              :style="{ width: '100%' }"
              placeholder="根据栏目搜索"
              clearable
            ></el-cascader>
          </el-form-item>
          <el-form-item label="审核状态">
            <el-select v-model="param.status" clearable placeholder="请选择">
              <el-option value="1" label="已审核">已审核</el-option>
              <el-option value="2" label="未审核">未审核</el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="属性">
            <el-select v-model="param.attr" clearable placeholder="请选择">
              <el-option value="1" label="推荐"></el-option>
              <el-option value="2" label="热点"></el-option>
              <el-option value="3" label="滚动"></el-option>
              <el-option value="4" label="评论"></el-option>
              <el-option value="5" label="回收站"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-zoom-in" @click="onSubmit">
              查询
            </el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" class="fyt-tools">
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="$refs.modify.handleAdd()"
        >
          添加
        </el-button>
        <el-button type="danger" icon="el-icon-delete" @click="delSelect">
          删除
        </el-button>
        <el-button
          type="warning"
          icon="el-icon-takeaway-box"
          @click="addRecycle"
        >
          移动到回收站
        </el-button>
        <el-button type="primary" icon="el-icon-document-copy" @click="copy">
          复制
        </el-button>
        <el-button type="primary" icon="el-icon-scissors" @click="transfer">
          转移
        </el-button>
      </el-col>
      <el-col :span="24">
        <el-table
          v-if="tableAttr.refresh"
          ref="multipleTable"
          v-loading="loading"
          border
          :data="tableData.items"
          :height="tableAttr.height"
          row-key="id"
        >
          <el-table-column
            type="selection"
            width="55"
            align="center"
            fixed="left"
          ></el-table-column>
          <el-table-column
            type="index"
            width="50"
            label="序号"
            align="center"
            fixed="left"
          ></el-table-column>
          <el-table-column
            prop="title"
            min-width="300px"
            label="标题"
            fixed="left"
          >
            <template slot-scope="scope">
              {{ '【' + scope.row.column.title + '】 ' + scope.row.title }}
            </template>
          </el-table-column>
          <el-table-column prop="attr" label="属性" width="320">
            <template slot-scope="scope">
              <el-tag
                :type="scope.row.attr.indexOf(1) > -1 ? 'success' : 'info'"
                disable-transitions
              >
                推荐
              </el-tag>
              <el-tag
                :type="scope.row.attr.indexOf(2) > -1 ? 'success' : 'info'"
                disable-transitions
              >
                热点
              </el-tag>
              <el-tag
                :type="scope.row.attr.indexOf(3) > -1 ? 'success' : 'info'"
                disable-transitions
              >
                滚动
              </el-tag>
              <el-tag
                :type="scope.row.attr.indexOf(4) > -1 ? 'success' : 'info'"
                disable-transitions
              >
                评论
              </el-tag>
              <el-tag
                :type="scope.row.attr.indexOf(5) > -1 ? 'success' : 'info'"
                disable-transitions
              >
                回收站
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="tag" label="标签" width="150">
            <template slot-scope="scope">
              <span v-for="it in scope.row.tag" :key="it">{{ it }}、</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="sort"
            label="权重"
            width="80"
          ></el-table-column>
          <el-table-column prop="status" label="审核状态" width="80">
            <template slot-scope="scope">
              <el-tag
                :type="scope.row.status ? 'success' : 'danger'"
                disable-transitions
              >
                {{ scope.row.status ? '显示' : '隐藏' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="hits"
            label="点击量"
            width="80"
          ></el-table-column>
          <el-table-column
            prop="createTime"
            label="更新时间"
            width="180"
          ></el-table-column>
          <el-table-column fixed="right" label="操作" width="160">
            <template slot-scope="scope">
              <el-link
                icon="el-icon-edit"
                :underline="false"
                type="primary"
                @click="$refs.modify.handelModify(scope.row)"
              >
                修改
              </el-link>
              <el-link
                icon="el-icon-delete"
                :underline="false"
                type="danger"
                style="margin-left: 15px"
                @click="deleteRow(scope.row)"
              >
                删除
              </el-link>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          style="text-align: right"
          :current-page="tableData.currentPage"
          :page-sizes="[10, 20, 50, 100, 200, 500, 1000]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.totalItems"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        ></el-pagination>
      </el-col>
    </el-row>
    <modify ref="modify" @complete="onComplete"></modify>
    <el-dialog
      :title="moldDialog.title"
      :visible.sync="moldDialog.visible"
      width="40%"
    >
      <el-alert
        title="请选择将要把数据转移/复制的指定栏目"
        type="success"
        :closable="false"
      ></el-alert>
      <div style="padding: 15px 0">
        <el-cascader
          v-model="columnIds"
          :options="parentIdOptions"
          :props="parentProps"
          :style="{ width: '100%' }"
          placeholder="请选择栏目"
          clearable
        ></el-cascader>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="moldDialog.visible = false">取 消</el-button>
        <el-button
          type="primary"
          :loading="moldDialog.btnLoading"
          @click="moldSubmit"
        >
          确 定
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import {
    getList,
    deletes,
    getColumn,
    recycle,
    copytransfer,
  } from '@/api/cms/article'
  import { changeTree } from '@/utils/treeTool'
  import modify from './modify'
  export default {
    components: {
      modify,
    },
    data() {
      return {
        param: {
          key: '',
          id: 0,
          attr: '',
          status: '',
        },
        tableAttr: {
          height: 300,
          expand: true,
          refresh: true,
        },
        loading: true,
        tableData: [],
        options: [
          {
            value: 1,
            label: '显示',
          },
          {
            value: 2,
            label: '隐藏',
          },
        ],
        parentIdOptions: [],
        parentProps: {
          multiple: false,
          checkStrictly: true,
          expandTrigger: 'hover',
          label: 'label',
          value: 'value',
          children: 'children',
        },
        moldDialog: {
          type: 1,
          title: '',
          visible: false,
          btnLoading: false,
        },
        columnIds: '',
      }
    },
    created() {
      this.tableAttr.height = window.innerHeight - 300
    },
    mounted() {
      this.init()
      this.initTree()
    },
    methods: {
      async initTree() {
        const t = await getColumn()
        let _tree = [{ id: '1', value: '0', label: '根目录', parentId: '0' }]
        t.data.some((m) => {
          _tree.push({
            id: m.id,
            value: m.id,
            label: m.title,
            parentId: m.parentId,
          })
        })
        this.parentIdOptions = changeTree(_tree)
      },
      async init() {
        this.loading = true
        if (this.param.id && this.param.id != '0') {
          this.param.id = this.param.id.pop()
        }
        const t = await getList(this.param)
        this.tableData = t.data
        this.loading = false
        console.log(this.tableData)
      },
      onSubmit() {
        this.init()
      },
      copy() {
        const _selectData = this.$refs.multipleTable.selection
        let ids = []
        _selectData.forEach((element) => {
          ids.push(element.id)
        })
        if (ids.length == 0) {
          this.$notify({
            message: '请选择要复制的项~',
            type: 'warning',
          })
          return
        }
        this.columnId = ''
        this.moldDialog.title = '批量复制'
        this.moldDialog.type = 1
        this.moldDialog.visible = true
      },
      transfer() {
        const _selectData = this.$refs.multipleTable.selection
        let ids = []
        _selectData.forEach((element) => {
          ids.push(element.id)
        })
        if (ids.length == 0) {
          this.$notify({
            message: '请选择要转移的项~',
            type: 'warning',
          })
          return
        }
        this.columnId = ''
        this.moldDialog.title = '批量转移'
        this.moldDialog.type = 2
        this.moldDialog.visible = true
      },
      async moldSubmit() {
        if (this.columnIds == '0' || !this.columnIds) {
          this.$notify({
            message: '请选择要转移的栏目~',
            type: 'warning',
          })
          return
        }
        const _selectData = this.$refs.multipleTable.selection
        let ids = []
        _selectData.forEach((element) => {
          ids.push(element.id)
        })
        if (ids.length == 0) {
          this.$notify({
            message: '请选择要转移的项~',
            type: 'warning',
          })
          return
        }
        this.moldDialog.btnLoading = true

        let res = await copytransfer({
          columnId: this.columnIds.pop(),
          type: this.moldDialog.type,
          articleIds: ids.join(','),
        })
        this.moldDialog.btnLoading = false
        this.moldDialog.visible = false
        const _this = this
        if (res.code == 200) {
          this.$notify({
            message: '操作成功',
            type: 'success',
          })
          _this.columnIds = ''
          _this.init()
        } else {
          this.$notify({
            message: res.message,
            type: 'error',
          })
        }
      },
      deleteRow(rows) {
        this.delSubmit(rows.id)
      },
      addRecycle() {
        const _selectData = this.$refs.multipleTable.selection
        let ids = []
        _selectData.forEach((element) => {
          ids.push(element.id)
        })
        if (ids.length == 0) {
          this.$notify({
            message: '请选择要添加到回收站的项~',
            type: 'warning',
          })
          return
        }
        var _this = this
        this.$confirm('确认要转移到回收站吗？', '提示', {
          type: 'warning',
        }).then(async () => {
          this.loading = true
          const res = await recycle(ids.join(','))
          this.loading = false
          if (res.code == 200) {
            this.$notify({
              message: '转移成功',
              type: 'success',
            })
            _this.init()
          } else {
            this.$notify({
              message: res.message,
              type: 'error',
            })
          }
        })
      },
      delSelect() {
        const _selectData = this.$refs.multipleTable.selection
        let ids = []
        _selectData.forEach((element) => {
          ids.push(element.id)
        })
        if (ids.length == 0) {
          this.$notify({
            message: '请选择要删除的项~',
            type: 'warning',
          })
          return
        }
        this.delSubmit(ids.join(','))
      },
      delSubmit(parm) {
        var _this = this
        this.$confirm('确认要删除当前的文章吗？', '提示', {
          type: 'warning',
        }).then(async () => {
          this.loading = true
          const res = await deletes(parm)
          this.loading = false
          if (res.code == 200) {
            this.$notify({
              message: '删除成功',
              type: 'success',
            })
            _this.init()
          } else {
            this.$notify({
              message: res.message,
              type: 'error',
            })
          }
        })
      },
      handleSizeChange(val) {
        this.param.page = 1
        this.param.limit = val
        this.init()
      },
      handleCurrentChange(val) {
        this.param.page = val
        this.init()
      },
      onComplete() {
        this.init()
      },
    },
  }
</script>
<style lang="scss" scoped></style>
